<template>
  <el-main v-loading="loading">
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      height="85vh"
      border
      stripe
      tooltip-effect="dark"
      style="width: 100%;">
      <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="time"
        label="操作时间"
        sortable
        width="360"
        align="center">
      </el-table-column>
      <el-table-column
        prop="user.nickname"
        label="操作人"
        width="360"
        align="center">
      </el-table-column>
      <el-table-column
        prop="target"
        label="操作目标"
        width="360"
        align="center">
      </el-table-column>
      <el-table-column
        prop="type"
        label="操作内容"
        show-overflow-tooltip
        header-align="center">
      </el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="[20, 40, 60, 80, 100]"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.totalRecord"
      layout="prev, pager, next, sizes, total"
      style="margin-top:16px;">
    </el-pagination>
  </el-main>
</template>

<script>
  export default{
    data(){
      return {
        /* 是否加载状态 */
        loading: true,
        /* 页面数据 */
        pageInfo: {
          currentPage: 1, //当前页面，默认1
          pageSize: 20, //页面大小，默认20
          totalRecord: 0, //总条数，默认0
        }
      }
    },
    methods: {
      /* 获取动态信息 */
      getPageInfo: function(){
        // 显示加载动画
        this.loading = true;

        /* 获取日期信息刚加载默认查询第一页、10个 */
        this.$axios.get("log/get/" + this.pageInfo.currentPage +"/" + this.pageInfo.pageSize).then(res => {
          if(res.data.status == "SUCCESS"){
            //为每个user对象初始化一个roleIDs，以便打开分配角色的弹出窗时，可以正确存放已选择的角色
            for(let user of res.data.data.list){
              user.roleIDs = []
            }

            //保存数据
            this.pageInfo = res.data.data

            // 结束加载动画
            this.loading = false;
          }else{
            this.$message.error("获取数据失败")
          }
        })
      },
      /* 分页插件当前页选择事件 */
      handleCurrentChange: function(currentPage){
        //同步选择的当前页面
        this.pageInfo.currentPage = currentPage;

        this.getPageInfo()
      },
      /* 分页插件页面大小更改事件 */
      handleSizeChange: function(pageSize){
        //同步选择的页面大小
        this.pageInfo.pageSize = pageSize;

        this.getPageInfo()
      }
    },
    mounted(){
      // 获取页面信息
      this.getPageInfo()
    }
  }
</script>

<style scoped>

</style>
